<template>
  <div class="services">
    <van-row v-if="categorys.length > 0" v-for="item in categorys" :key="index">
      <van-col span="24">
        <div class="entry m-b-20" @click="toComics(item.path)">
          <div class="left" :style="{backgroundImage:'url('+item.ico+')'}"></div>
          <div class="right">
            <h5>{{item.title}}</h5>
            <div class="line-t-6"></div>
            <p>{{item.subtitle}}</p>
          </div>
          <div class="label hot" v-if="item.type == 1">人气</div>
          <div class="label new" v-if="item.type == 2">最新</div>
        </div>
      </van-col>
    </van-row>
    <div class="line-t-20"></div>

    <PageLoading v-if="categorys.length <= 0"></PageLoading>
  </div>
</template>

<script>
    import {API} from "../api";
    import PageLoading from "./PageLoading";
    import {showToast} from "../utils";

    export default {
      name: "IndexCategory",
      components: {PageLoading},
      data(){
        return {
          categorys:[]
        }
      },
      mounted() {
        this.getData();
      },
      methods:{
        getData(){
          let _this = this;
          API.getIndexCategory({}).then( res => {
            if(res.code == 200){
              _this.categorys = res.data.info;
            }
          });
        },
        toComics(path){
          if(path != '-'){
            this.$router.push({ path: '/pages/'+path+'/main'});
          } else {
            showToast("功能开发中");
          }

        }
      }
    }
</script>

<style scoped>
  .services {
    width:90%;
    margin: 0px auto;
  }
  .services .entry:before{content:'';display:table;}
  .services .entry {
    position: relative;
    background: #f368a1;
    border-radius: 5px;
    padding: 10px 17px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
  }
  .services .entry .left:before{content:'';display:table;}
  .services .entry .left{
    width: 57px;
    height: 57px;
    border-radius: 50%;
    border: 2px solid #fff;
    background-size: 100% 100%;
  }
  .services .entry .right{
    color: #fff;
    margin-left: 15px;
  }

  .services .entry .left .ico {
    font-size: 20px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #fff;
    border: 2px solid #fff;
  }

  .services .entry .right h5 {
    font-size: 16px;
  }
  .services .entry .right p {
    font-size: 13px;
  }
  .services .entry .label{
    position: absolute;
    right: 0;
    top: 10px;
    padding: 3px 7px;
    font-size: 12px;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .services .entry .label.hot{
    color: #f368a1;
  }
  .services .entry .label.new{
    color: dodgerblue;
  }
</style>
